<template>
  <div class="home">

    <!--S下拉刷新-->
    <down-refresh
            :top="down_up.top"
            :opacity="down_up.opacity"
            :refresh="down_up.refresh"
            @refreshed="down_up.refresh = false"
    >
    </down-refresh>
    <!--E下拉刷新-->

    <!--S头部-->
    <i-header ref="iHeader" :number="number">
    </i-header>
    <!--E头部-->

    <!--S内容-->
    <div id="content"
         v-if="data.length > 0"
         @touchstart="touchstart"
         @touchmove="touchmove"
         @touchend="touchend"
    >
      <scroll-list
              :data="data"
              :index="prev_index"
              @change="redChange"
              @changed="changed"
      >
      </scroll-list>
    </div>
    <!--E内容-->
    <!--S空列表-->
    <empty v-if="data.length <= 0 && !first_loading">暂无红包</empty>
    <!--E空列表-->

    <!--S第一次加载动画-->
    <first-loading v-if="first_loading"></first-loading>
    <!--E第一次加载动画-->

    <!--S上拉无更多内容-->
    <up-nomore
            :bottom="down_up.bottom"
            :opacity="down_up.opacity"
    ></up-nomore>
    <!--E上拉无更多内容-->

    <!--S上拉加载更多提醒-->
    <more-hint v-if="more_hint_show"></more-hint>
    <!--E上拉加载更多提醒-->

    <!--S子页面-->
    <transition :name="transition_name">
        <router-view class="main-child"/>
    </transition>
    <!--E子页面-->

  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { mapState } from "vuex"
import store from "@/store"
import util from "@/util/util.js"
import Header from "./components/header"
import DownRefresh from "./components/down-refresh"
import UpNomore from "./components/up-nomore"
import ScrollList from "@c/scroll-list"
import Empty from "@c/empty"
import FirstLoading from "./components/loading"
import MoreHint from "./components/more-hint"
export default {
  name: "home",
  data () {
    return {
      // 页面切换动画
      transition_name: 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s',
      // 红包列表数据
      data: [],
      // 请求数量
      limit: [0,10],
      // 上一个红包下标
      prev_index: 0,
      // 上一次上拉加载的红包下标位置
      loading_index: 0,
      // 进入页面第一次加载
      first_loading: true,
      // 红包个数
      number: {number:0,numbered:0},
      // 红包列表滑动操作
      touch: {
        // 开始滑动Y坐标点
        startY: 0
      },
      // 下拉刷新,上拉组件数据
      down_up: {
        top:0, // style Top值
        bottom:0, // style Bottom值
        opacity:0, // style Opacity值
        refresh: false, // 是否正在刷新
        doing: 'down'  // 下拉down或者上拉up
      }
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.transition_name = to.path.split('/').length < from.path.split('/').length ? 'change-path animate__animated animate__slideOutRight animate__faster animate__delay-2s' : 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s'
    setTimeout(() => {
      next()
    },10)
  },
  components: {
    'i-header': Header,
    DownRefresh,
    UpNomore,
    ScrollList,
    Empty,
    MoreHint,
    FirstLoading
  },
  computed: {
    more_hint_show () {
      let is_show = false
      if(this.data.length > 1 && this.prev_index === 0 && !Cookies.get('kuyuan_hb_know_more')) {
        is_show = true
      }
      return is_show
    },
    ...mapState({
      enter_red: "enter_red",
      area: "area"
    })
  },
  watch: {
    "$route"(value,to) {
      if(to.name === 'home-send' || to.name === 'list') {
        if(this.enter_red !== 0) {
          util.share(this.enter_red)
          this.getEnterRed()
        }
      }
    },
    more_hint_show(value) {
      if(!value) {
        Cookies.set('kuyuan_hb_know_more',true,{ expires: 30 })
      }
    }
  },
  mounted() {
    util.parseShareId()
      .then(() => {
        return util.location()
      })
      .then(() => {
        if(this.enter_red) {
          return this.getEnterRed()
        }
      })
      .then(() => {
        return this.getList()
      })
      .then(() => {
        this.first_loading = false
        if(this.data.length > 0) {
          util.share(this.data[0].id)
        }
      })
  },
  methods: {
    // Run
    /**
     * 获取红包列表
     */
    getList() {
      return this.$post("red/getHomeList",{
        limit: this.limit,
        enter_red: this.enter_red,
        area: this.area
      })
        .then((res) => {
          let {code, data} = res.data
          if(code === 0) {
            this.enter_red && store.commit("enter_red", 0)
              this.data.push(...data)
              this.limit[0] += this.limit[1];
          }
        })
    },
    /**
     * 加载入口红包
     */
    getEnterRed() {
      // 查询红包是否加载出来，没有加载请求，加载出来直接滑动到指定位置
      if(this.data.length > 0) {
        for(let i=0;i<this.data.length;i++) {
            if(this.data[i].id === this.enter_red) {
              this.prev_index = i
              return
            }
        }
        return this.getOneRed()
      } else {
        return this.getOneRed()
      }
    },
    /**
     * 获取一个红包，并且插入列表
     */
    getOneRed() {
      return this.$get("red/find", {
        red_id: this.enter_red
      })
              .then((res)=>{
                let {code, data} = res.data
                if(code === 0) {
                  this.number = {number: data.number,numbered: data.numbered}
                  this.data.splice(this.prev_index,0,data)
                }
              })
    },
    /**
     * 红包切换
     */
    redChange(res) {
      this.number = res
    },
    /**
     *红包切换完成
     */
    changed(index) {
      //加载新的数据
      if(this.prev_index < index){
        if(this.data.length-index === 5 && index > this.loading_index){
          this.getList();
          this.loading_index = index;
        }
      }
      this.prev_index = index;
    },
    /**
     *红包列表内容开始滑动
     */
    touchstart(res) {
      this.touch.startY = res.touches[0].pageY
    },
    /**
     * 红包列表内容滑动中
     */
    touchmove(res) {
      if(this.data.length > 0) {

        let iPageY = res.touches[0].pageY;

        // 下拉刷新
        if(this.prev_index === 0 && iPageY > this.touch.startY) {
          this.down_up.doing = 'down'
          let diff = iPageY - this.touch.startY
          if(diff <= (this.$refs.iHeader.$el.getBoundingClientRect().height + 5)) {
            this.down_up.top = diff
            this.down_up.opacity = 1-(1/diff)
          }else{
            this.down_up.opacity = 1
          }
        }

        // 上拉无更多内容
        if(this.prev_index === this.data.length - 1 && iPageY < this.touch.startY) {
          this.down_up.doing = 'up'
            let diff = Math.abs(iPageY - this.touch.startY)
            let SendBtnRect = document.querySelector('#send-btn').getBoundingClientRect()
            let limit_bottom = document.documentElement.clientHeight - SendBtnRect.y
            if(diff <= limit_bottom){
              this.down_up.bottom = diff
              this.down_up.opacity = 1-(1/diff)
            }else{
              this.down_up.opacity = 1;
            }
        }
      }
    },
    /**
     * 红包列表内容结束滑动
     */
    touchend() {
      // 下拉刷新
      if(this.down_up.doing === 'down') {

        if(this.down_up.opacity > 0 && this.down_up.opacity < 1) {
          this.down_up.top = 0
          this.down_up.opacity = 0
        } else if(this.down_up.opacity === 1) {
          this.down_up.refresh = true
          setTimeout(() => {
            this.down_up.top = 0
            this.down_up.opacity = 0
            this.data = []
            this.limit = [0,10]
            this.prev_index = 0
            this.loading_index = 0
            this.getList()
          },2000)
        }

      } else {

        // 上拉无更多内容
        if(this.down_up.opacity > 0){
          this.down_up.bottom = 0;
          setTimeout(()=>{
            this.down_up.opacity = 0;
          },300);
        }

      }
    }
  }
}
</script>

<style scoped src="./home.less" lang="less"></style>
